<template>
<div>
    <Card :bordered="false" dis-hover>
        <!-- 按钮 当前位置-->
        <div class="g_header_nav">
            <div class="g_header_t">
                <div class="operate-btns">
                    <a class="fbtn iconfont icon-head-modify" @click='disabled=false' v-if='false'>修改</a>
                    <a class="fbtn iconfont icon-head-save" @click='save' :disabled="saveDisabled">保存</a>
                    <a class="fbtn iconfont icon-head-release" @click='publish'>发布</a>
                </div>
            </div>
            <div class="con_breadcrumb">
                <ol class="breadcrumb">
                    <li>
                        <router-link to="/front/demandEditList">需求发布列表</router-link>
                    </li>
                    <li>
                        <a href="#">需求发布编辑</a>
                    </li>
                </ol>
                <h3 class="current_module">需求发布编辑</h3>
            </div>
        </div>
        <!--end  按钮 当前位置-->
        <!--end头部-->
        <div class="content">
            <form class="layui-form">
                <!-- 基本资料 -->
                <div class="business-info col-md-12">
                    <div class="fheader">
                        <h4 class="fh-tit fh-notes">基本资料</h4>
                        <span class="tips red-tips">*为必填项</span>
                    </div>
                    <div class="fpart pull1">
                        <div class="row">
                            <div class=" col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">需求服务</span>
                                    <div class="flex1">
                                        <input type="text" placeholder="仓库租赁" name="companyname" v-model='detail.DemandServices' :disabled='disabled'>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">货物范围</span>
                                    <div class="flex1">
                                        <select v-model='detail.GoodsCategory'>
                                            <option value=""></option>
                                            <option value="fastProduct">快消产品</option>
                                            <option value="device">家用电器</option>
                                            <option value="office">办公/文仪</option>
                                            <option value="medical">医疗器械</option>
                                            <option value="furniture">家具</option>
                                            <option value="hardware">五金/配件</option>
                                            <option value="clothes">服饰/鞋帽</option>
                                            <option value="sport">体育/户外</option>
                                            <option value="home">家居日用</option>
                                            <option value="oil">农副/粮油</option>
                                            <option value="skin">护肤/化妆</option>
                                            <option value="food">食品/保健</option>
                                            <option value="drink">酒水/饮料</option>
                                            <option value="tire">汽配/轮胎</option>
                                            <option value="other">其它原材料</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex require">
                                    <span class="flexitem">联系人</span>
                                    <div class="flex1">
                                        <input type="text" placeholder="" name="contact" v-model='detail.Contacts'>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex require">
                                    <span class="flexitem">联系电话</span>
                                    <div class="flex1">
                                        <input type="text" placeholder="" name="tel" v-model='detail.ContactTel'>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex require">
                                    <span class="flexitem flexitem">需求面积</span>
                                    <div class="flex1">
                                        <input type="number" placeholder="" name="englishname" v-model='detail.TotalAreaAge'>
                                    </div>
                                    <i class="flexitem">㎡</i>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex require">
                                    <span class="flexitem">起租日期</span>
                                    <div class="flex1">
                                        <DatePicker type="date" :options="options3" size="large" style="width: 196px;border:none;" format="yyyy-MM-dd" @on-change='handleStart' :value="valueDate"></DatePicker>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">截止日期</span>
                                    <div class="flex1">
                                        <DatePicker type="date" :options="options3" size="large" style="width: 204px;border:none;" format="yyyy-MM-dd" @on-change='handleEnd' :value="valueDate2"></DatePicker>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">预计租期</span>
                                    <div class="flex1">
                                        <input type="number" placeholder="" name="englishname" v-model='detail.PlanLeasePeriod'>
                                    </div>
                                    <i>月</i>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex require">
                                    <span class="flexitem">最高租赁价格</span>
                                    <div class="flex1">
                                        <input type="number" placeholder="" name="englishname" v-model='detail.LeasingPrice'>
                                    </div>
                                    <i class="flexitem">元/㎡/月</i>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">仓库类型</span>
                                    <div class="flex1">
                                        <select v-model='detail.WareHouseType'>
                                            <option value="" selected>请选择</option>
                                            <option value="01">平库</option>
                                            <option value="02">高台库</option>
                                            <option value="03">楼库</option>
                                            <option value="04">地下仓库</option>
                                            <option value="05">立体库</option>
                                            <option value="06">坡道库</option>
                                            <option value="07">气体库</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">存储标准</span>
                                    <div class="flex1">
                                        <select v-model='detail.StorageType'>
                                            <option value="" selected>请选择</option>
                                            <option value="01">普通仓</option>
                                            <option value="02">恒温仓</option>
                                            <option value="03">冷藏仓</option>
                                            <option value="04">冷冻仓</option>
                                            <option value="05">多温仓</option>
                                            <option value="06">露天堆场</option>
                                            <option value="07">有棚堆场</option>
                                            <option value="08">危化品库</option>
                                            <option value="09">医药库</option>
                                            <option value="10">其他</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex require">
                                    <span class="flexitem">地址</span>
                                    <div class="flex1">
                                        <Cascader :data="ressData" :value.sync="value1" @on-change='venue' size='large' trigger="hover"></Cascader>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 仓库要求 -->
                <div class="business-info col-md-12">
                    <div class="fheader">
                        <h4 class="fh-tit fh-notes">仓库要求</h4>
                        <span class="tips red-tips">*为必填项</span>
                    </div>
                    <div class="fpart pull1">
                        <div class="row">
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">产权证</span>
                                    <div class="flex1">
                                        <select name="interest" lay-filter="aihao" v-model='detail.PropertyRightsFlag'>
                                            <option value="Y">要有产权证</option>
                                            <option value="N">不做要求</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">土地证</span>
                                    <div class="flex1">
                                        <select name="interest" lay-filter="aihao" v-model='detail.LandCertificateFlag'>
                                            <option value="Y">要有土地证</option>
                                            <option value="N">不做要求</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">仓库层高</span>
                                    <div class="flex1">
                                        <select v-model="detail.FloorHeight">
                                            <option value="">不限</option>
                                            <option value="1">6米以下</option>
                                            <option value="2">6-9米</option>
                                            <option value="3">9-12米</option>
                                            <option value="4">12米以上</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">月台</span>
                                    <div class="flex1">
                                        <select name="interest" lay-filter="aihao" v-model='detail.Platform'>
                                            <!-- <option value="0">不限</option> -->
                                            <option value="1">无月台</option>
                                            <option value="2">单面月台</option>
                                            <option value="3">双面月台</option>
                                            <option value="4">多面月台</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">消防</span>
                                    <div class="flex1">
                                        <select name="interest" lay-filter="aihao" v-model='detail.FireFighting'>
                                            <option value="">不限</option>
                                            <option value="1">无</option>
                                            <option value="2">甲类</option>
                                            <option value="3">乙类</option>
                                            <option value="4">丙类</option>
                                            <option value="5">丁类</option>
                                            <option value="6">戊类</option>
                                            <option value="7">正在办理</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">结构</span>
                                    <div class="flex1">
                                        <select name="interest" lay-filter="aihao" v-model='detail.BuildingStructure'>
                                            <option value="1">砖瓦混合</option>
                                            <option value="2">轻钢结构</option>
                                            <option value="3">重钢结构</option>
                                            <option value="4">钢混结构</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 配套需求 -->
                <div class="business-info col-md-12">
                    <div class="fheader">
                        <h4 class="fh-tit fh-notes">配套需求</h4>
                        <span class="tips red-tips">*为必填项</span>
                    </div>
                    <div class="fpart pull1">
                        <div class="row">
                            <div class="col-md-6 col-lg-3">
                                <div class="text-input displayflex">
                                    <span class="flexitem">最大用电功率</span>
                                    <div class="flex1">
                                        <input type="text" v-model='detail.MaxElectricPower'>
                                    </div>
                                    <i class="flexitem">千瓦</i>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <div class="text-input checkbox-input displayflex">
                                    <span class="flexitem">库内水电网</span>
                                    <div class="flex1">
                                        <label class="icon-checkbox">
                                            <input type="checkbox" v-model='detail.HydropowerNetwork2' value="water">
                                            <span><i>通水</i></span>
                                        </label>
                                        <label class="icon-checkbox">
                                            <input type="checkbox" v-model='detail.HydropowerNetwork2' value="electricity">
                                            <span><i>通电</i></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-lg-6">
                                <div class="text-input checkbox-input displayflex">
                                    <span class="flexitem">安保系统</span>
                                    <div class="flex1">
                                        <label class="icon-checkbox">
                                            <input type="checkbox" v-model="detail.SecuritySystem2" value="monitor">
                                            <span><i>中央监控</i></span>
                                        </label>
                                        <label class="icon-checkbox">
                                            <input type="checkbox" v-model="detail.SecuritySystem2" value="security">
                                            <span><i>保安人员</i></span>
                                        </label>
                                        <label class="icon-checkbox">
                                            <input type="checkbox" v-model="detail.SecuritySystem2" value="patrol">
                                            <span><i>24小时巡逻</i></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">

                            <div class="col-md-12 col-lg-6">
                                <div class="text-input checkbox-input displayflex">
                                    <span class="flexitem">消防系统</span>
                                    <div class="flex1">
                                        <label class="icon-checkbox">
                                        <input type="checkbox" v-model="detail.FireFightingSystem2" value="spray">
                                            <span><i>喷淋</i></span>
                                        </label>
                                        <label class="icon-checkbox">
                                        <input type="checkbox" v-model="detail.FireFightingSystem2" value="smoke">
                                            <span><i>烟感</i></span>
                                        </label>
                                        <label class="icon-checkbox">
                                        <input type="checkbox" v-model="detail.FireFightingSystem2" value="fireHydrant">
                                            <span><i>消防栓</i></span>
                                        </label>
                                        <label class="icon-checkbox">
                                        <input type="checkbox" v-model="detail.FireFightingSystem2" value="fireExtinguisher">
                                            <span><i>灭火器</i></span>
                                        </label>
                                        <label class="icon-checkbox">
                                        <input type="checkbox" v-model="detail.FireFightingSystem2" value="fireAlarm">
                                            <span><i>消防警钟</i></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 仓库信息编辑 -->
                <div class="cert-info col-md-12">
                    <div class="fheader">
                        <h4 class="fh-tit fh-cert">补充说明</h4>
                    </div>
                    <div class="fpart pull5">
                        <div class="cert-manage clearfix">
                            <editor @editValue="addParagraph"></editor>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </Card>
</div>
</template>

<script>
export default {
    data() {
        return {
            value1: [],
            valueDate: "",
            valueDate2: "",
            ressData: this.$store.state.cities,
            options3: {
                disabledDate(date) {
                    return date && date.valueOf() < Date.now() - 86400000;
                }
            },
            // 需求信息发布绑定
            detail: {
                Province: "410000",
                City: "",
                GUID: "",
                HydropowerNetwork2: [], // 库内水电网复选框
                SecuritySystem2: [], // 安保系统复选框
                FireFightingSystem2: [], // 消防系统复选框
                DemandServices: "仓库租赁"
            },
            disabled: true,
            loading: true,
            IsPublish: "",
            saveDisabled: false,
        };
    },
    mounted() {
        this.detail.index = 2;
        this.detail.content = this.detail.Introduction;

        this.$bus.emit("showEditorModel", this.detail);
    },
    methods: {
        venue(val, txt) {
            this.detail.Venue = txt.map(c => c.label).join("/");
            this.detail.City = val[0];
            this.detail.District = val[1];
        },
        handleStart(value) {
            this.detail.StartRentalDate = value;
        },
        handleEnd(value) {
            this.detail.DeadLine = value;
        },
        getData() {
            var self = this;

            this.axios
                .get("/api/requirement/details/" + this.$route.params.guid)
                .then(function(res) {
                    if (!res.HydropowerNetwork) {
                        res.HydropowerNetwork = "[]";
                    }
                    if (!res.SecuritySystem) {
                        res.SecuritySystem = "[]";
                    }
                    if (!res.FireFightingSystem) {
                        res.FireFightingSystem = "[]";
                    }

                    self.value1 = [res.City, res.District];
                    self.valueDate = res.StartRentalDate;
                    self.valueDate2 = res.DeadLine;
                    self.IsPublish = res.IsPublish;
                    res.HydropowerNetwork2 = JSON.parse(res.HydropowerNetwork);
                    res.SecuritySystem2 = JSON.parse(res.SecuritySystem);
                    res.FireFightingSystem2 = JSON.parse(res.FireFightingSystem);
                    self.detail = res;
                    self.detail.index = 2;
                    self.detail.content = self.detail.Introduction;

                    // if (!self.detail.Venue) {
                    //     let province = self.ressData.find(c => c.value == res.Province);

                    //     if (province) {
                    //         let city = province.children.find(c => c.value == res.City);

                    //         if (city) {
                    //             self.detail.Venue = province.label + "/" + city.label;
                    //         }
                    //     }
                    // }

                    self.$bus.emit("showEditorModel", self.detail);
                });
        },
        save() {
            var self = this;
            var phone = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;

            if (!this.detail.Contacts) {
                this.$Message.error("请填写联系人!");
                return;
            } else if (!this.detail.ContactTel) {
                this.$Message.error("请填写联系电话!");
                return;
            } else if (!phone.test(this.detail.ContactTel)) {
                this.$Message.error("手机格式不正确");
                return;
            } else if (!this.detail.TotalAreaAge) {
                this.$Message.error("请填写需求面积!");
                return;
            } else if (!(this.detail.TotalAreaAge > 0)) {
                this.$Message.error("请输入大于零的需求面积!");
                return;
            } else if (!this.detail.StartRentalDate) {
                this.$Message.error("请选择租赁日期!");
                return;
            } else if (!this.detail.LeasingPrice) {
                this.$Message.error("请填写租赁价格!");
                return;
            } else if (this.detail.StartRentalDate > this.detail.DeadLine) {
                this.$Message.error("截止日期要大于起租日期!");
                return;
            } else if (!this.detail.Venue) {
                this.$Message.error("请填写地址!");
                return;
            }

            this.detail.HydropowerNetwork = JSON.stringify(
                this.detail.HydropowerNetwork2
            );
            this.detail.SecuritySystem = JSON.stringify(this.detail.SecuritySystem2);
            this.detail.FireFightingSystem = JSON.stringify(
                this.detail.FireFightingSystem2
            );

            if (this.$route.params.falg == "false") {
                this.detail.GUID = this.$route.params.guid;
            } else {
                this.detail.GUID = "";
            }

            this.saveDisabled = true;
            this.$store.commit('loading');

            this.axios.post("/api/requirement/save", this.detail).then(function(res) {
                self.$store.commit('loading', false);
                
                if (!res.message) {
                    self.$Message.success("保存成功");
                    if (res.guid) {
                        self.$route.params.guid = res.guid;
                    }

                      self.$router.push("/front/demandEditList");
                }
            }).catch(function(res){
                self.saveDisabled = true;
                console.log(JSON.stringify(res));
                self.$store.commit('loading', false);
                self.$Message.error("保存失败");
            });
        },
        publish: function() {
            var self = this;

            if (this.$route.params.falg == "false") {
                this.detail.GUID = this.$route.params.guid;
            } else {
                this.detail.GUID = "";
            }
            if (this.$route.params.guid == "00") {
                this.$Message.error("请先保存再发布");
                return;
            }
            this.axios
                .post("/api/requirement/publish", {
                    GUID: this.$route.params.guid
                })
                .then(function(res) {
                    if (!res.message) {
                        self.$Message.success("发布成功");
                    }

                    self.$router.push("/front/demandEditList");
                });
        },
        addParagraph(editValue) {
            this.detail.Introduction = editValue;
        }
    },
    created() {
        if (this.$route.params.falg == "false") {
            this.getData();
        }
    },
    activated() {
        if (this.$route.params.falg == "false") {
            this.getData();
        }
    },
    watch: {
        detail: {
            handler: function(val, oldVal) {
                self.IsPublish = "N";
            },
            deep: true
        }
    }
};
</script>


